@charset "utf-8";
/* CSS Document for new Front Page started March 13, 2023 */
body {
  background-color: black;
	color: white;
}
a {
	color: white;
	text: normal;
}
img {
  vertical-align: middle;
  width: 100%;
  height: auto;
}
a:link {
  text-decoration: none;
}


img {
  width: 100%;
  height: auto;
}
ul {
  padding: .5em;
  list-style-type: none;
  display: inline-block;
  box-shadow: .2em .2em .15em black;
  border-radius: 5px;
  border: thin solid white;
  background: rgba(0, 0, 0, 0.2);
  margin: 0em;
}
li {
  float: left;
  border: medium solid white;
  max-height: 99px;
  width: 99px;
  border-radius: 5px;
  padding: 0px;
  text-align: center;
  color: white;
  margin: .2em;
	margin-bottom: 0em;

}
li:hover {
 border: medium solid red;
}

.NoImage {
  font-size: 1.25vw;
}
/* Font Styles */
h1, h3, h4 {
  margin-top: 0px;
  margin-bottom: 0px;
}
h1 {
  font-size: 2vw; /* "viewport width" units, a responsive font style */
}
#topContainer {
  width: 100%;
	margin: 0em;
}
.mainTopicContainers { /* Only one shows at a time by default*/
  background-color: #1A95AD;
  overflow: hidden;
  padding: .75em;
  margin: 0px;
}
.mainTopicContainers li {
	background-color: black;
}
.ContainerIntro {
	
}
.ContainerIntro img {
  width: 100px;
  height: normal;
  margin-right: 5px;
}
.NOAAlink { /* Use for non-local links to NOAA*/
  width: 100px;
  height: 100px;
  background-image: url("frontPageGraphics/100pxNOAA.png");
}
#MainNavDiv { /*--------------Main Navigation Div- always displayed at top ------------------------*/
	margin: 0em;
    overflow: hidden; /*Keeps the list items within the div border*/
}
#MainNavDiv ul {
  
  overflow: hidden; /*Keeps the list items within the div border*/
}
#MainNavDiv li {
	width: 80px;
	height: 80px;
	border: medium solid white;
	margin-bottom: 0px; /* Tab styling */
}
#MainNavDiv li:hover {
  border: medium solid red;
  color: black;
}
#navigation { /* Navigation Menu*/
  border: thin solid red;
  border-radius: .25em .25em .0em .0em;
  margin: 0;
  overflow: hidden; /*Keeps the list items within the div border*/
}
#navigation ul {
  padding: 0px;
  margin: 0px;
}
#navigation li { /* Navigation Menu list items*/
		 width: 100px;
	height: 100px;
  padding: .5em;
  margin: 0px 3px 0px 2px;
  background-color: white;
  border-radius: .25em;
  overflow: hidden; /*Keeps the list items within the div border*/
}
.TwoColumn {
  overflow: hidden;
}
.TwoColumn p {
  float: left;
}
.TwoColumn img {
  float: left;
}
/* Banner Container for menu */
#topContainer ul {
  padding: 1px;
}
.TempTab { /*Special Formating to make temporary tabs stick out.*/
  font-weight: bold;
}

/*Start topicContainer and nav buttons background color styles */
.homeColor {
  background-color: #A40101;

}
.newsColor {
  background-color: rgba(255,186,38,1.00);
	color: black;
}
.streamingColor {
  background-color: #F5F956;
	color: black;
}
.shoppingColor {
  background-color: #CDFEA0;
	color: black;
}
.weatherColor {
  background-color: #3D7A09;
}
.watercolorColor {
  background-color: #029055;
}
.michiganColor {
  background-color: #1674C1;
}
.SCAColor {
  background-color: #6A13B5;
}
/*End topicContainer background color styles */
#navigation li {
  width: auto;
  height: auto;
}
h5 {
  margin: 0px;
  text-align: center;
  font-size: 20px;
  font-weight: normal;

}
.topicIntro { /*This is for the first list item in each container, used for titles and introductions. */
  width: 70px;
}
.HomeButton {
  border: thin solid black;
  border-radius: 1em;
	margin-left: 1em;
}
.globalControl { /*Currently only the "Show All" button in navigation*/
  color: red;
  font-weight: bold;
}
@media screen and (max-width: 992px) {
  li {
    width: 70px;
    /*height: 70px;*/
  }
  /*   .WebAndFB a {
    width: 70px;
    float: left;
  }*/
  ul {
    margin: .1em 0em .5em 0em;
  }
  .mainTopicContainers { /* Only one shows at a time by default*/
    padding: .25em;
    margin: .25em;
  }
  h1 {
    font-size: 24px;
  }
}
@media(hover: hover) and (pointer: fine) { /* Hover behavior ONLY on non-touch devices, like phones */
  
}
.TwoColumnLeft {
  float: left;
}